<template>
  <div class="batch-booking-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="flx-row-bw">
        <div class="left-area">
          <div
            class="list-item f-18"
            v-for="(item, index) in list"
            :key="index"
            :class="[item.id == id ? 'active' : 'normal']"
            @click="clickTab(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="right-area">
          <Spin :withIcon="true" v-if="loading"></Spin>
          <template v-if="exist != null && exist">
            <h2 class="f-20 f-w-600 title c-d2">{{ title }}</h2>
            <div class="flx-row-c-c w-p-100">
              <span class="f-14 c-g" style="margin-right: 20px"
                >发布时间：{{ releaseTime }}</span
              >
              <span class="f-14 c-g">浏览次数：{{ views }}</span>
            </div>
            <div class="ql-snow">
              <div class="bottom-area ql-editor" v-html="content"></div>
            </div>
          </template>
          <Empty-State
              style="background-color: #fff"
              v-else-if="exist != null && !exist"
              content="内容不存在！"
            ></Empty-State>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHome, getAboutDetail } from "@/api/data"
export default {
  data() {
    return {
      loading: false,
      breadCrumb: [{ name: "", to: "/about" }],
      list: [],
      exist: null,
      id: null,
      title: '',
      releaseTime: '',
      content: '',
      views: ''
    };
  },
  watch: {
    '$route.query.id': {
      immediate: true,
      handler(newValue) {
        if(newValue && !isNaN(newValue)) this.id = newValue;
        if(this.id == null || this.id == '') {
          if(this.list.length > 0) {
            this.id = this.list[0].id
            this.getdetail()
          }
        } else {
          this.getdetail()
        }
      }
    }
  },
  created() {
    this.getHome()
  },
  methods: {
    // 切换tab
    clickTab(id) {
      if(this.id == id) return
      this.$router.push({
        name: 'about',
        query: {
          id: id
        }
      })
    },
    // 获取首页的内容
    async getHome() {
      let res = await getHome({
        source: 0,
      });
      if (res.code == 200) {
        this.list = res.data.helpList;
        if(this.id == null || this.id == '') {
          if(this.list.length > 0) {
            this.id = this.list[0].id
            this.breadCrumb[0].name = this.list[0].title
            this.getdetail()
          }
        }
      }
    },
    // 获取内容详情
    async getdetail() {
      this.loading = true
      let res = await getAboutDetail(this.id);
      if(res.code == 200) {
        this.exist = true
        this.title = res.data.title
        this.breadCrumb[0].name = res.data.title
        this.releaseTime = res.data.releaseTime
        this.content = res.data.content
        this.views = res.data.views
      } else {
        this.exist = false
      }
      this.loading = false
    }
  },
};
</script>

<style lang="scss" scoped>
.batch-booking-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .left-area {
    width: 300px;
    padding-top: 30px;
    background-color: #fff;
    box-shadow: 0px 0px 11px 2px rgba(0, 16, 36, 0.02);

    .list-item {
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;

      &.normal {
        @include h-c(#fff, null, rgba(#373737, 0.8), #f9521f);
        cursor: pointer;
      }
      &.active {
        background-color: #feede8;
        color: #f9521f;
      }
    }
  }
  .right-area {
    width: 880px;
    padding: 30px 50px 50px;
    background-color: #fff;
    min-height: 500px;
    position: relative;
    box-shadow: 0px 0px 11px 2px rgba(0, 16, 36, 0.02);

    .title {
      text-align: center;
      margin-bottom: 10px;
    }

    .bottom-area {
      margin-top: 20px;
    }
  }
}
</style>